<template>
  <div>
    <el-row>
      <span>VIP等级奖励设置</span>
    </el-row>
    <el-row class="vip-padding">
      <div class="vip-level-set-title">等级配置</div>
      <el-form :inline="true" ref="ruleForm" :rules="rule" :model="form">
        <el-table :data="form.configs" border>
          <el-table-column label="VIP等级" prop="levelName" align="center" width="70px">
          </el-table-column>
            <el-table-column label="升级礼金" prop="upGradeAward" align="center">
              <template slot-scope="{row, $index}">
                <el-form-item :prop="'configs.' + $index + '.upGradeAward'" :rules="rule.upGradeAward">
                  <el-input  type="text" min="0" :disabled="row.level==='VIP0'" v-model="row.upGradeAward" > </el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="取款流水倍数" prop="upGradeAwardBR" align="center">
              <template slot-scope="{row, $index}">
                <el-form-item :prop="'configs.' + $index + '.upGradeAwardBR'" :rules="rule.upGradeAwardBR">
                  <el-input  type="text" min="0" :disabled="row.level==='VIP0'" v-model="row.upGradeAwardBR"> </el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="生日礼金" prop="birthdayAward" align="center">
              <template slot-scope="{row, $index}">
                <el-form-item :prop="'configs.' + $index + '.birthdayAward'" :rules="rule.birthdayAward">
                  <el-input  type="text" min="0" :disabled="row.level==='VIP0'" v-model="row.birthdayAward"> </el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="取款流水倍数" prop="birthdayAwardBR" align="center">
              <template slot-scope="{row, $index}">
                <el-form-item :prop="'configs.' + $index + '.birthdayAwardBR'" :rules="rule.birthdayAwardBR">
                  <el-input  type="text" min="0" :disabled="row.level==='VIP0'" v-model="row.birthdayAwardBR"> </el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="每月VIP红包" prop="monthlyAward" align="center">
              <template slot-scope="{row, $index}">
                <el-form-item :prop="'configs.' + $index + '.monthlyAward'" :rules="rule.monthlyAward">
                  <el-input  type="text" min="0" :disabled="row.level==='VIP0'" v-model="row.monthlyAward"> </el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="取款流水倍数" prop="monthlyAwardBR" align="center">
              <template slot-scope="{row, $index}">
                <el-form-item :prop="'configs.' + $index + '.monthlyAwardBR'" :rules="rule.monthlyAwardBR">
                  <el-input  type="text" min="0" :disabled="row.level==='VIP0'" v-model="row.monthlyAwardBR"> </el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <!--<el-table-column label="实物礼品配置" prop="quarterBet" align="center" width="400px">-->
              <!--<template slot-scope="{row, $index}">-->
                <!--<el-form-item :prop="'configs.' + $index + '.quarterBet'" :rules="rule.quarterBet">-->
                  <!--<el-select v-model="row.label"  placeholder="请选择实物礼品" >-->
                    <!--<el-option-->
                      <!--label="是的方式的"-->
                      <!--value="1"-->
                    <!--&gt;</el-option>-->
                  <!--</el-select>-->
                  <!--<el-select v-model="row.label"  placeholder="请选择实物礼品" >-->
                    <!--<el-option-->
                      <!--label="是的方式的"-->
                      <!--value="1"-->
                    <!--&gt;</el-option>-->
                  <!--</el-select>-->
                <!--</el-form-item>-->
              <!--</template>-->
            <!--</el-table-column>-->
        </el-table>
      </el-form>
    </el-row>
    <el-row>
      <div class="tip-wrapper">
        <p><span class="red">* </span>取款流水倍数支持1位小数，其它项必须为整数</p>
        <p><span class="red">* </span>各项最小值为0，取款流水倍数最大为100，其它项无上限</p>
      </div>
    </el-row>
    <el-row class="vip-padding">
      <el-button v-if="roleCheck('awards-setting-save')" type="primary" @click="doSave({ action: 'saveForm', form: 'ruleForm' })">保存</el-button>
      <el-button @click="reset">恢复上次设置</el-button>
    </el-row>
  </div>
</template>

<script>
import { factory, form } from '@/build';
import { getVipAwardConfig, saveVipAwardConfig } from '@/services/api/vipManage';

export default {
  name: 'awardConfig',
  mixins: [factory, form],
  data() {
    return {
      form: {
        configs: [
          {
            level: 7,
            levelName: 'VIP7',
            upGradeAward: 0,
            upGradeAwardBR: 0,
            birthdayAward: 0,
            birthdayAwardBR: 0,
            monthlyAward: 0,
            monthlyAwardBR: 0,
          },
          {
            level: 6,
            levelName: 'VIP6',
            upGradeAward: 0,
            upGradeAwardBR: 0,
            birthdayAward: 0,
            birthdayAwardBR: 0,
            monthlyAward: 0,
            monthlyAwardBR: 0,
          },
          {
            level: 5,
            levelName: 'VIP5',
            upGradeAward: 0,
            upGradeAwardBR: 0,
            birthdayAward: 0,
            birthdayAwardBR: 0,
            monthlyAward: 0,
            monthlyAwardBR: 0,
          },
          {
            level: 4,
            levelName: 'VIP4',
            upGradeAward: 0,
            upGradeAwardBR: 0,
            birthdayAward: 0,
            birthdayAwardBR: 0,
            monthlyAward: 0,
            monthlyAwardBR: 0,
          },
          {
            level: 3,
            levelName: 'VIP3',
            upGradeAward: 0,
            upGradeAwardBR: 0,
            birthdayAward: 0,
            birthdayAwardBR: 0,
            monthlyAward: 0,
            monthlyAwardBR: 0,
          },
          {
            level: 2,
            levelName: 'VIP2',
            upGradeAward: 0,
            upGradeAwardBR: 0,
            birthdayAward: 0,
            birthdayAwardBR: 0,
            monthlyAward: 0,
            monthlyAwardBR: 0,
          },
          {
            level: 1,
            levelName: 'VIP1',
            upGradeAward: 0,
            upGradeAwardBR: 0,
            birthdayAward: 0,
            birthdayAwardBR: 0,
            monthlyAward: 0,
            monthlyAwardBR: 0,
          },
        ],
      },
      rule: {
        upGradeAward: [
          {
            validator: factory.getValidator('proportion', {
              min: 0,
            }),
          },
        ],
        upGradeAwardBR: [
          {
            validator: factory.getValidator('proportion', {
              min: 0,
              max: 100,
              decimal: 1,
            }),
          },
        ],
        birthdayAward: [
          {
            validator: factory.getValidator('proportion', {
              min: 0,
            }),
          },
        ],
        birthdayAwardBR: [
          {
            validator: factory.getValidator('proportion', {
              min: 0,
              max: 100,
              decimal: 1,
            }),
          },
        ],
        monthlyAward: [
          {
            validator: factory.getValidator('proportion', {
              min: 0,
            }),
          },
        ],
        monthlyAwardBR: [
          {
            validator: factory.getValidator('proportion', {
              min: 0,
              max: 100,
              decimal: 1,
            }),
          },
        ],
      },
      resetData: [],
    };
  },
  mounted() {
    this.bindGet(getVipAwardConfig, 'form', {
      action: 'getConfig',
      format: (data) => {
        const list = [];
        _.each(this.form.configs, (item) => {
          _.each(data, (val) => {
            delete val.validInCome;
            delete val.validBetting;
            delete val.minMaintainValidBetting;
            delete val.withdrawCount;
            delete val.rebateTypeConfigs;

            if (item.levelName === val.levelName) {
              Object.assign(item, val);
            }
          });
          list.push(item);
        });
        this.resetData = JSON.stringify(list);
        return { configs: list };
      },
    });
    this.bindSave(saveVipAwardConfig, 'saveForm', 'form', {
      beforeSend: (data) => {
        const newData = JSON.parse(JSON.stringify(data));
        newData.configs.push({
          level: 0,
          levelName: 'VIP0',
          upGradeAward: 0,
          upGradeAwardBR: 0,
          birthdayAward: 0,
          birthdayAwardBR: 0,
          monthlyAward: 0,
          monthlyAwardBR: 0,
        });
        return newData;
      },
      afterSuccess: ([result, data]) => {
        if (result) {
          this.resetData = JSON.stringify(this.form.configs);
        }
      },
    });
    this.doGet({ action: 'getConfig' });
  },
  methods: {
    reset() {
      this.form.configs = JSON.parse(this.resetData);
    },
  },
};
</script>

<style lang="scss" scoped>
  .vip-padding{
    padding: 20px 20px 0 20px;
    /deep/ .el-form-item--mini.el-form-item{
      margin-top: 18px;
    }
  }
  .vip-level-set-title{
    margin-bottom: 10px;
  }
  .tip-wrapper{
    margin: 5px 0 0 20px;
    p{
      margin: 0;
      font-size: 12px;
      color: #d3d3d3;
      line-height: 18px;

      .red{
        color: red;
      }
    }
  }
</style>
